<script setup lang="ts">

const data = ref<{ [key in string]: { a?: number } }>({ test: { a: 1 } })

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const someErrorLogger = (error: any) => {
  console.log('捕获到错误', error)
}

onMounted(() => {
  setTimeout(() => {
    data.value = { test2: { a: 2 } }
  }, 2000) 
})

</script>

<template>
  <div>
    <UButton @click="() => { showError({ statusCode: 110, statusMessage: '测试显示错误页面' }) }">显示错误页面</UButton>
    <NuxtErrorBoundary @error="someErrorLogger">
      <!-- 使用默认插槽渲染你的内容 -->
      <div>{{ data }}</div>
      <div>{{ data.test.a }}</div>
      <template #error="{ error, clearError }">
        你可以在这里本地显示错误：{{ error }}
        <button @click="clearError">
          这将清除错误。
        </button>
      </template>
    </NuxtErrorBoundary>
  </div>
</template>

<style scoped>

</style>